<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./index.js"></script>
</head>

<body>
    <div class="header">
        <!-- <center> -->
        <div class="header_info">
            <div class="left_header">
                <img id="logo" src="../public/kugou_white.png" alt="">
                <div class="search">
                    <span class="iconfont icon-sousuo"></span>
                    <input type="text">
                </div>
            </div>
            <div class="right_header">
                <a href="#">我的音乐</a>
                <a href="#">歌单广场</a>
                <a href="#">音乐排行榜</a>
                <a href="#">歌手</a>
                <div class="login">登录</div>
            </div>
        </div>
        <!-- </center> -->
    </div>



    <div class="masage">
        <div class="rank">
            <span>
                <h3>排行榜</h3>
                <p>CHART</p>
            </span>
            <div class="sort_rank">
                <img src="../public/images/排行榜.jpg" alt="">
                <span class="iconfont icon-yunhang"></span>
                <div class="text_info">
                    <h4>酷狗飙升榜</h4>
                    <div class="song">
                        <p><span>1</span><span>爱都爱了</span>-<span>小洲</span></p>
                        <p><span>2</span><span>爱都爱了</span>-<span>小洲</span></p>
                        <p><span>3</span><span>缺氧</span>-<span>小洲</span></p>
                    </div>
                    
                </div>
            </div>
            <div class="sort_rank">
                <img src="../public/images/排行榜.jpg" alt="">
                <div class="text_info">
                    <h4>酷狗飙升榜</h4>
                    <div class="song">
                        <p><span>1</span><span>爱都爱了</span>-<span>小洲</span></p>
                        <p><span>2</span><span>爱都爱了</span>-<span>小洲</span></p>
                        <p><span>3</span><span>缺氧</span>-<span>小洲</span></p>
                    </div>
                    
                </div>
            </div>
            <div class="sort_rank">
                <img src="../public/images/排行榜.jpg" alt="">
                <div class="text_info">
                    <h4>酷狗飙升榜</h4>
                    <div class="song">
                        <p><span>1</span><span>爱都爱了</span>-<span>小洲</span></p>
                        <p><span>2</span><span>爱都爱了</span>-<span>小洲</span></p>
                        <p><span>3</span><span>缺氧</span>-<span>小洲</span></p>
                    </div>
                    
                </div>
            </div>
            <div class="sort_rank">
                <img src="../public/images/排行榜.jpg" alt="">
                <div class="text_info">
                    <h4>酷狗飙升榜</h4>
                    <div class="song">
                        <p><span>1</span><span>爱都爱了</span>-<span>小洲</span></p>
                        <p><span>2</span><span>爱都爱了</span>-<span>小洲</span></p>
                        <p><span>3</span><span>缺氧</span>-<span>小洲</span></p>
                    </div>
                    
                </div>
            </div>
            <div class="sort_rank">
                <img src="../public/images/排行榜.jpg" alt="">
                <div class="text_info">
                    <h4>酷狗飙升榜</h4>
                    <div class="song">
                        <p><span>1</span><span>爱都爱了</span>-<span>小洲</span></p>
                        <p><span>2</span><span>爱都爱了</span>-<span>小洲</span></p>
                        <p><span>3</span><span>缺氧</span>-<span>小洲</span></p>
                    </div>
                    
                </div>
            </div>
            <div class="sort_rank">
                <img src="../public/images/排行榜.jpg" alt="">
                <div class="text_info">
                    <h4>酷狗飙升榜</h4>
                    <div class="song">
                        <p><span>1 </span> <span>爱都爱了</span>-<span>小洲</span></p>
                        <p><span>2 </span> <span>爱都爱了</span>-<span>小洲</span></p>
                        <p><span>3 </span> <span>缺氧</span>-<span>小洲</span></p>
                    </div>
                </div>
            </div>
        </div>


        <div class="song_heat">
            <h4 class="song_heat_tittle">新歌榜</h4>
            <div class="song_heat_info">
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                    <span class="iconfont icon-yunhang"></span>
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
            </div>
        </div>

        <div class="song_heat">
            <h4 class="song_heat_tittle">特色榜</h4>
            <div class="song_heat_info">
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
            </div>
        </div>


        <div class="song_heat">
            <h4 class="song_heat_tittle">全球榜</h4>
            <div class="song_heat_info">
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
                <div class="sort_info">
                    <img src="../public/images/排行榜.jpg" alt="">
                </div>
            </div>
        </div>
        

    </div>


    <div class="flooter">
        <ul>
            <li>
                <p>腾讯音乐娱乐集团</p>
            </li>
            <li>
                <p>腾讯音乐人</p>
            </li>
            <li>
                <p>酷狗音乐人</p>
            </li>
            <li>
                <p>星曜推歌</p>
            </li>
            <li>
                <p>5sing原创计划</p>
            </li>
            <li>
                <p>曲库开放计划</p>
            </li>
            <li>
                <p>听歌识曲</p>
            </li>
            <li>
                <p>歌叽歌叽</p>
            </li>
        </ul>
        <p class="text">此网页仅用于学习研究@gdxzzyxy 2020-2023 20JJ01B08 user_h</p>
    </div>
</body>

</html>